<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情-青鸟商城</title>
    <link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/common.css">
    <link rel="stylesheet" href="./assets/css/detail.css">
    <!-- 引入jquery -->
    <script src="./assets/js/jquery.js"></script>
    <script src="./assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/js/common.js"></script>
    <style>
        .product-count {
            width: 100px !important;
            margin-top: 6px;
            margin-right: 20px;
        }

        .product-count input {
            background-color: #fff !important;
        }

        .product-count .input-group-addon {
            cursor: pointer;
            background-color: #fff;
        }
    </style>
</head>

<body>

    <nav class="navbar navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="./index.html">青鸟商城</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">热门推荐 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">国际品牌</a></li>
                    <li><a href="#">数码电器</a></li>
                    <li><a href="#">每日特价</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="./login.html">登录</a></li>
                    <li><a href="./reg.html">注册</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container movie-detail">
        <div class="media">
            <div class="media-left preview_img">
                <img class="media-object" xoriginal="./uploads/big/01.png" src="./uploads/big/001.png" alt="...">
                <div class="xzoom-thumbs">
                    <a href="./uploads/big/01.png"><img class="xzoom-gallery5" width="80" src="./uploads/01.png"
                            xoriginal="./uploads/big/01.png"></a>
                    <a href="./uploads/big/01.png"><img class="xzoom-gallery5" width="80" src="./uploads/02.png"
                            xoriginal="./uploads/big/01.png"></a>
                    <a href="./uploads/big/01.png"><img class="xzoom-gallery5" width="80" src="./uploads/03.png"
                            xoriginal="./uploads/big/01.png"></a>
                    <a href="./uploads/big/01.png"><img class="xzoom-gallery5" width="80" src="./uploads/04.png"
                            xoriginal="./uploads/big/01.png"></a> </div>
            </div>
            <div class="media-body">
                <h2 class="media-heading">Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h2>
                <div class="tips">
                    推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返
                </div>
                <div class="price-wrap">
                    <p>
                        <span class="text-muted">价格</span>
                        <span class="price">&yen;6888</span>
                        <span class="text-muted pull-right">累计销量612188</span>
                    </p>
                    <p>
                        <span class="text-muted">促销</span>
                        <span>
                            加购价 满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换 购热销商品 详情 》
                        </span>
                    </p>
                    <p>
                        <span class="text-muted">支持</span>以旧换新，闲置手机回收 4G套餐超值抢 礼品购
                    </p>
                </div>
                <div class="color-group">
                    <span class="text-muted">选择颜色</span>
                    <button class="btn-color">金色</button>
                    <button class="btn-color">白色</button>
                    <button class="btn-color">黑色</button>
                    <button class="btn-color">土豪金</button>
                    <button class="btn-color">玫瑰金</button>
                </div>
                <div class="mode-group">
                    <span class="text-muted">选择版本</span>
                    <button class="btn-color">官方标配</button>
                    <button class="btn-color">移动优惠</button>
                    <button class="btn-color">电信优惠</button>
                    <button class="btn-color">联通优惠</button>
                </div>
                <div class="clearfix">
                    <div class="input-group product-count pull-left">
                        <div class="input-group-addon">-</div>
                        <input type="text" readonly class="form-control" value="1">
                        <div class="input-group-addon">+</div>
                    </div>
                    
                    <button class="btn btn-danger btn-lg border-radius pull-left">加入购物车</button>
                </div>
            </div>
        </div>

        <div class="row adv">
            <div class="col-xs-12">
                <img src="./uploads/adv/adv-10.webp" alt="">
            </div>
        </div>

        <div class="row introduce">
            <div class="col-xs-3">
                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <h3 class="panel-title">商品推荐</h3>
                    </div>
                    <div class="panel-body recom-list">
                        <div class="">
                            <img src="./uploads/01.png" alt="">
                            <h5>iphone11-土豪金</h5>
                            <p class="price"><b>&yen;9999</b></p>
                        </div>
                        <div class="">
                            <img src="./uploads/02.png" alt="">
                            <h5>iphone11-玫瑰金</h5>
                            <p class="price"><b>&yen;9999</b></p>
                        </div>
                        <div class="">
                            <img src="./uploads/03.png" alt="">
                            <h5>iphone11-星空灰</h5>
                            <p class="price"><b>&yen;9999</b></p>
                        </div>
                        <div class="">
                            <img src="./uploads/04.png" alt="">
                            <h5>iphone11-暗夜黑</h5>
                            <p class="price"><b>&yen;9999</b></p>
                        </div>
                        <div class="">
                            <img src="./uploads/05.png" alt="">
                            <h5>iphone11-白色</h5>
                            <p class="price"><b>&yen;9999</b></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-9">
                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <h3 class="panel-title">商品介绍</h3>
                    </div>
                    <div class="panel-body">
                        <img src="./uploads/detail/detail_img1.jpg" alt="">
                        <img src="./uploads/detail/detail_img2.jpg" alt="">
                        <img src="./uploads/detail/detail_img3.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <div class="container-fluid footer">
        <div class="row">
            <div class="col-lg-12">
                Copyright 2019 by www.braccp.com 北京畅想唯优信息技术有限公司 All rights reserved.
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                联系电话：029-88212666 地址：西安市雁塔区电子一路 石油大学北门工会楼二层
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                备案号：陕ICP备19013769号-1
            </div>
        </div>
    </div>

    <div class="fixed-nav-right">
        <!-- 返回首页 -->
        <div class="fixed-home">
            <a href="./index.html">
                <i class="glyphicon glyphicon-home"></i>
            </a>
        </div>
        <!-- 购物车 -->
        <div class="fixed-cart">
            <a href="./cart.html">
                <i class="glyphicon glyphicon-shopping-cart"></i>
            </a>
        </div>
        <!-- 返回顶部 -->
        <div class="back-top">
            <i class="glyphicon glyphicon-chevron-up"></i>
        </div>
    </div>


</body>

</html>